﻿<div class="wrapper">
    <div class="logo">
        <img src="content/images/logo.png" style="width: 500px;">
    </div>
    <div class="login-form">
        <div class="login-form-inner">
            <form name="changePasswordForm">
                <div class="login-text" style="margin-left: 0;">
                    Enter your new password below and press login to access<br />Sustainalytics’ Global Access Platform
                </div><br /><br />
                <div class="table-row-login">
                    <div class="table-cell-login">
                        <div class="input-label" style="width: 135px;">New Password</div>
                        <div class="input-holder">
                            <input type="password" class="inp" name="passwordBox" data-ng-model="auth.usercredentials.password" />

                        </div>
                        <div class="clear">&nbsp;</div>
                        <div class="spacer">&nbsp;</div>
                        <div class="input-label" style="width: 135px;">Confirm Password</div>
                        <div class="input-holder"><input type="password" class="inp" data-ng-model="auth.usercredentials.confirmPassword"></div>
                        <div class="clear">&nbsp;</div>
                    </div>
                    <div class="login-button">
                        <!--<button id="submitButton" type="submit" data-ng-click="auth.changePassword()" data-ng-disabled="changePasswordForm.$invalid">
                            <img src="content/images/btn_login.gif" style="width: 60px;">
                        </button>-->
                        <button id="submitButton" class="btn-green forg_btn" data-ng-click="auth.setPassword()" data-ng-disabled="changePasswordForm.$invalid" ng-class="auth.submitClassLast">
                            <span ng-if="auth.submitClassLast == null">Change Password</span>
                            <span ng-if="auth.submitClassLast != null"><span class="glyphicon glyphicon-refresh spin2"></span><span style="font-family:Calibri; margin-left: 10px;">Changing...</span></span>
                        </button>
                    </div>                    
                </div>                
            </form>
            <div class="error_password" data-ng-show="changePasswordForm.$invalid" style="margin-top: 10px;">
                <div style="color: red;" compile="auth.usercredentials.errorMessage"></div>
                <div style="font-size: 16px; font-weight: bold;">The password format is the following:</div>
                <div>
                    <div style="float: left; margin-right: 10px;" ng-show="!auth.minimumLength()"><img src="/content/images/icon-error.png" width="12"></div>
                    <div style="float: left; margin-right: 10px;" ng-show="auth.minimumLength()"><img src="/content/images/icn-green-check.jpg" width="12"></div>
                    <div style="float: left;">Must be at least 7 characters long</div>
                    <div class="clear">&nbsp;</div>
                </div>
                <div>
                    <div style="float: left; margin-right: 10px;" ng-show="!auth.hasCapital()"><img src="/content/images/icon-error.png" width="12"></div>
                    <div style="float: left; margin-right: 10px;" ng-show="auth.hasCapital()"><img src="/content/images/icn-green-check.jpg" width="12"></div>
                    <div style="float: left;">Must contain at least 1 capital letter</div>
                    <div class="clear">&nbsp;</div>
                </div>
                <div>
                    <div style="float: left; margin-right: 10px;" ng-show="!auth.hasNumber()"><img src="/content/images/icon-error.png" width="12"></div>
                    <div style="float: left; margin-right: 10px;" ng-show="auth.hasNumber()"><img src="/content/images/icn-green-check.jpg" width="12"></div>
                    <div style="float: left;">Must contain at least 1 number</div>
                    <div class="clear">&nbsp;</div>
                </div>
                <div>
                    <div style="float: left; margin-right: 10px;" ng-show="auth.invalidCharacters()"><img src="/content/images/icon-error.png" width="12"></div>
                    <div style="float: left; margin-right: 10px;" ng-show="!auth.invalidCharacters()"><img src="/content/images/icn-green-check.jpg" width="12"></div>
                    <div style="float: left;">Invalid characters (&quot;, &amp;, &#39;, &lt;, &gt;, &#43;, &#123;, &#125;)</div>
                    <div class="clear">&nbsp;</div>
                </div>
                <div>
                    <div style="float: left; margin-right: 10px;" ng-show="!auth.passwordMatch()"><img src="/content/images/icon-error.png" width="12"></div>
                    <div style="float: left; margin-right: 10px;" ng-show="auth.passwordMatch()"><img src="/content/images/icn-green-check.jpg" width="12"></div>
                    <div style="float: left;">The passwords do not match</div>
                    <div class="clear">&nbsp;</div>
                </div>
            </div>
        </div>
    </div>
</div>
